<template>
	<view>
		<uni-section title="工程列表" type="line"></uni-section>
		<view class="content">
			<uni-list style="width:100%">
				<uni-collapse>
					<text class="tips" v-if="listData.length <= 0">无工程记录！</text>
					<uni-collapse-item 
					:open="true"
					:title="(v.team == null ? '非团队项目' : '团队：' + v.team.name) + '   共 '  + v.projects.length + ' 个项目'" 
					:show-animation="true" 
					style="margin-left: 20rpx;"
					v-for="(v,key) in listData" :key="key"
					v-if="listData.length > 0">
						<uni-swipe-action>
							<uni-swipe-action-item v-for="item in v.projects" :key="item.id" :right-options="options"
								:show="isOpen" :auto-close="true" @change="change" @click="bindClick($event,item)">
								<view class="content-box">
									<uni-list-chat :key="item.id" :avatar="item.avatarUrl == '' ? noImage : item.avatarUrl"
										:title="item.name" :note="item.note" :time="item.createTime" :clickable="true"
										:badge-text="'共' + item.days + '天'" @click="goWorkList(item.id)"></uni-list-chat>
								</view>
							</uni-swipe-action-item>
						</uni-swipe-action>
					</uni-collapse-item>
				</uni-collapse>
			</uni-list>
			<view class="uni-loadmore" v-if="showLoadMore">{{loadMoreText}}</view>
			<uni-fab ref="fab" :pattern="fab.pattern" :content="fab.content" :horizontal="fab.horizontal"
				:vertical="fab.vertical" :direction="fab.direction" @trigger="trigger" @fabClick="fabClick" />
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				page: 1,
				count: 0,
				UNITS: {
					'年': 31557600000,
					'月': 2629800000,
					'天': 86400000,
					'小时': 3600000,
					'分钟': 60000,
					'秒': 1000
				},
				noImage: '/static/noImage.png',
				isLogin: false,
				title: "loading...",
				listData: [],
				loadMoreText: "加载中...",
				showLoadMore: false,
				isOpen: "none",
				fab: {
					horizontal: 'left',
					vertical: 'bottom',
					direction: 'horizontal',
					pattern: {
						color: '#7A7E83',
						backgroundColor: '#fff',
						selectedColor: '#7A7E83',
					},
					content: [{
							url: '/pages/new/project-new-edit',
							iconPath: '/static/new-project.png',
							selectedIconPath: '/static/new-project.png',
							text: '工程',
							active: false
						},
						{
							url: '/pages/new/work-list-new-edit',
							iconPath: '/static/new-work-list.png',
							selectedIconPath: '/static/new-work-list.png',
							text: '工作',
							active: false
						},
					]
				},
				options: [{
						text: '编辑',
						style: {
							backgroundColor: '#007aff'
						}
					},
					{
						text: '删除',
						style: {
							backgroundColor: '#dd524d'
						}
					}
				],
			}
		},
		onLoad() {},
		onShow() {
			if (!this.$dry.isLogin()) {
				uni.showModal({
					title: "信息",
					content: "需要登录后查看，去登录",
					showCancel: false,
					confirmText: "确定",
					success: function(res) {
						if (res.confirm) {
							uni.switchTab({
								url: '../user/user',
							})
						}
					}
				});
			}
			this.initData();
		},
		onUnload() {
			this.loadMoreText = "加载更多",
				this.showLoadMore = false;
		},
		onReachBottom() {
			if (this.listData.length < this.count) {
				this.showLoadMore = true;
				this.page++;
				this.getList();
			}
			this.loadMoreText = "没有更多数据了!"
			return;
		},
		onPullDownRefresh() {
			setTimeout(() => {
				this.initData();
				uni.stopPullDownRefresh();
			}, 300);
		},
		onBackPress() {
			if (this.$refs.fab.isShow) {
				this.$refs.fab.close()
				return true
			}
			return false
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '大家都在用这款小工具管理项目，快来试试吧！！！',
				path: '/pages/index/index'
			}
		},
		methods: {
			initData() {
				this.page = 1;
				this.listData = [];
				this.getList();
			},
			getList() {
				var token = this.$dry.getToken();
				var data = [];
				if (token) {
					data = this.$request.run("queryMyProjects",token);
					uni.request({
						url: data.url,
						method: data.method,
						header: data.header,
						data: {},
						success: data => {
							// console.log(data)
							if(data.statusCode === 200) {
								this.listData = data.data;
								// this.listData = [...this.listData, ...newItems];
								this.$dry.set("project", this.listData);
								//console.log(this.$oss.domain);
							}
						}
					})
				}
			},
			change(e) {
				this.isOpen = e;
				//console.log('返回：', e);
			},
			bindClick(e, data) {
				var that = this;
				if (e.index == 0) {
					uni.setStorageSync("project_data", data);
					uni.navigateTo({
						url: '../new/project-new-edit',
					})
				} else {
					uni.showModal({
						title: "信息",
						content: "确定要删除" + data.name + "吗",
						showCancel: true,
						confirmText: "确定",
						success: function(res) {
							if (res.confirm) {
								if (data.days > 0) {
									uni.showModal({
										title: "信息",
										content: "该工程已有工作记录或消费记录，不能删除！！！",
										showCancel: false,
									})
								} else {
									that.delProject(data.id);
								}
							}
						}
					});
				}
			},
			delProject(id) {
				var data = {
					"id": id
				}
				this.$request.delete("deleteProject", data, this.$dry.getToken());
				this.initData();
			},
			showLoading: function() {
				uni.showLoading({
					title: 'loading'
				});

				// #ifdef MP-ALIPAY
				this._showTimer && clearTimeout(this._showTimer);
				this._showTimer = setTimeout(() => {
					this.hideLoading();
				}, 3000)
				// #endif
			},
			hideLoading: function() {
				uni.hideLoading();
			},
			goWorkList(id) {
				this.$dry.set("projectId", id);
				uni.switchTab({
					url: '../work-list/work-list'
				})
			},
			trigger(e) {
				//console.log(e)
				this.fab.content[e.index].active = !e.item.active
				this.$refs.fab.close();
				uni.navigateTo({
					url: e.item.url
				})
			},
			fabClick() {
				// 	uni.showToast({
				// 		title: '点击了悬浮按钮',
				// 		icon: 'none'
				// 	})
			},
			getObjLength(obj) {
				if (typeof obj == "string") {
					return obj.length;
				}
				var j = 0;
				for (var i in obj) {
					j++;
				}
				return j;
			},
			format(dateStr) {
				var date = this.parse(dateStr)
				var diff = Date.now() - date.getTime();
				if (diff < this.UNITS['天']) {
					return this.humanize(diff);
				}
				var _format = function(number) {
					return (number < 10 ? ('0' + number) : number);
				};
				return date.getFullYear() + '-' + _format(date.getMonth() + 1) + '-' + _format(date.getDate()) + ' ' +
					_format(date.getHours()) + ':' + _format(date.getMinutes());
			},
			parse(str) { //将"yyyy-mm-dd HH:MM:ss"格式的字符串，转化为一个Date对象
				var a = str.split(/[^0-9]/);
				return new Date(a[0], a[1] - 1, a[2], a[3], a[4], a[5]);
			},
			getNumberOfDays(date1, date2) { //获得天数
				//date1：开始日期，date2结束日期
				var a1 = Date.parse(new Date(date1));
				var a2 = Date.parse(new Date(date2));
				var day = parseInt((a2 - a1) / (1000 * 60 * 60 * 24)); //核心：时间戳相减，然后除以天数
				return day + 1;
			},
			getNumberOfHours(date1, date2) { //获得小时数
				//date1：开始日期，date2结束日期
				var a1 = Date.parse(new Date(date1));
				var a2 = Date.parse(new Date(date2));
				var hour = parseInt((a2 - a1) / (1000 * 60 * 60)); //核心：时间戳相减，然后除以小时数
				return hour
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	@charset "UTF-8";

	/* 头条小程序组件内不能引入字体 */
	/* #ifdef MP-TOUTIAO */
	@font-face {
		font-family: uniicons;
		font-weight: normal;
		font-style: normal;
		src: url("~@/static/uni.ttf") format("truetype");
	}

	/* #endif */
	/* #ifndef APP-NVUE */
	view {
		font-size: 14px;
		line-height: inherit;
	}

	/* #endif */

	.word-btn-white {
		font-size: 18px;
		color: #FFFFFF;
	}

	.word-btn {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		border-radius: 6px;
		height: 48px;
		margin: 15px;
		background-color: #007AFF;
	}

	.word-btn--hover {
		background-color: #4ca2ff;
	}

	.chat-custom-right {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
	}

	.chat-custom-text {
		font-size: 12px;
		color: #999;
	}
	
	.tips{
		padding:10rpx 20rpx;
		text-align: left;
		font-size: 24rpx;
		color: #0077AA;
	}
</style>
